<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My-Page</title>
    <style>
        *{
            /* border: 1px solid tomato; */
        }
        /* reset */
        body,div,h1,h3,a{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            text-align: center;
        }
        /*  */
        body{
            width: 100vw;
            height: 100vh;
            position: relative;
            background: url('./assets/pexels-donald-tong-55787.jpg') no-repeat;
            background-size: 100% 100%;
        }
        div.box{
            padding: 20px;
            position: absolute;
            top: 50%;
            transform: translate(0,-50%);
            /* border: 1px solid tomato; */
            width: 200px;
            height: 200px;
            border-radius:100% ;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow:
                9.7px 0.8px 2.2px rgba(0, 0, 0, 0.01),
                23.2px 1.9px 5.3px rgba(0, 0, 0, 0.018),
                43.7px 3.6px 10px rgba(0, 0, 0, 0.025),
                78px 6.5px 17.9px rgba(0, 0, 0, 0.033),
                145.8px 12.1px 33.4px rgba(0, 0, 0, 0.043),
                349px 29px 80px rgba(0, 0, 0, 0.07)
            ;
        }
        h1,h3{
            padding: 10px;
        }
        img.icon{
            width: 25px;
            height: 25px;
            vertical-align: bottom;
        }
        div.myName{
            background-color:#135AF2;
            z-index: 999;
            transition: all 1s ease-in;
            border-right:6px solid black ;
        }
        div.myResume{
            justify-content: flex-end;
            width: 1000px;
            height: 1000px;
            left: -20%;
            background-color:#3399CC;
            z-index: 900;
            border-right:6px solid black ;
            transition: all 1s ease-in;
        }
        div.myProject{
            justify-content: flex-end;
            width: 1600px;
            height: 1600px;
            left: -20%;
            background-color:#CCCCCC; 
            transition: all 1s ease-in;           
        }

        @media screen and (max-width: 960px){
            *{
                font-size: 1.3rem;
            }
            body{
                background-size: 300% 200%;
                background-position:10% 90%;
            }
            div.box{
                /* top: 0%;
                left: 0%;
                transform: translate(0,0);
                padding: 20px;
                width: 200px;
                height: 200px;
                border-radius:100% ; */
                box-shadow:
                    0.6px 5.4px 2.2px rgba(0, 0, 0, 0.01),
                    1.5px 13px 5.3px rgba(0, 0, 0, 0.025),
                    2.8px 24.4px 10px rgba(0, 0, 0, 0.044),
                    4.9px 43.6px 17.9px rgba(0, 0, 0, 0.057),
                    9.2px 81.5px 33.4px rgba(0, 0, 0, 0.065),
                    22px 195px 80px rgba(0, 0, 0, 0.07)
                ;
            }
            div.myName{
                top: 0%;
                left: 50%;
                transform: translate(-50%,0);
                border-right:none;
                border-bottom:6px solid black ;
                transition: all 1s ease-in;
            }
            div.myResume{
                width: 400px;
                height: 400px;
                top: 0%;
                left: 50%;
                transform: translate(-50%,0%);
                justify-content: center;
                align-items: flex-end;
                border-right:none;
                border-bottom:6px solid black ;
                transition: all 1s ease-in;
            }
            div.myProject{
                width: 650px;
                height: 650px;
                top: 0%;
                left: 50%;
                transform: translate(-50%,0%);
                justify-content: center;
                align-items: flex-end;
                transition: all 1s ease-in;
            }            
        }

    </style>
</head>
<body>
    <div class="box myName">
        <h1>I AM SAM9029</h1>
    </div>
    <div class="box myResume">
        <div>
            <h1>My-Resume</h1>
            <h3>
                <img src="./assets/我的简历.svg" alt="icon" class="icon">
                <a href="./myResume-unfinished/index.html">My-Resume-Page</a>
            </h3>
            <p></p>
        </div>
    </div>
    <div class="box myProject">
        <div>
            <h1>My-Project</h1>
            <h3>
                <img src="./assets/web.svg" alt="icon" class="icon">
                <a href="./newTravel/index.html">NewTravel</a>
            </h3>
            <h3>others</h3>
        </div>
    </div>
    
</body>
</html>